<template>
  <div v-if="widget.type === 'grid-adv-col'" class="grid-cell"
       :class="[selected ? 'selected' : '', customClass]"
       :style="[
           colHeightStyle,gridAdvColStyle,
           widget.options.spaceStyle,
           widget.options.sizeStyle
       ]"
       @click.stop="selectWidget(widget)">
    <draggable :list="widget.widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 400}"
               tag="div" :component-data="{name: 'fade', class: 'drag-drop-zone'}"
               :style="[widget.options.containerStyle,{}]"
               handle=".drag-handler" @end="(evt) => onGridDragEnd(evt, widget.widgetList)"
               @add="(evt) => onGridDragAdd(evt, widget.widgetList)"
               @update="onGridDragUpdate"
               :move="checkContainerMove">
      <template #item="{ element: subWidget, index: swIdx }">
        <div class="form-widget-list">
          <template v-if="'container' === subWidget.category">
            <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id"
                       :parent-list="widget.widgetList"
                       :index-of-parent-list="swIdx" :parent-widget="widget"></component>
          </template>
          <template v-else>
            <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id"
                       :parent-list="widget.widgetList"
                       :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
          </template>
        </div>
      </template>
    </draggable>
    <div class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'grid-adv-col'">
      <i :title="i18nt('designer.hint.selectParentWidget')"
         @click.stop="selectParentWidget(widget)">
        <svg-icon icon-class="el-back"/>
      </i>
      <i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
         @click.stop="moveUpWidget()">
        <svg-icon icon-class="el-move-up"/>
      </i>
      <i v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
         @click.stop="moveDownWidget()">
        <svg-icon icon-class="el-move-down"/>
      </i>
      <!--      <i :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneGridCol(widget)">
              <svg-icon icon-class="el-clone" />
            </i>-->
      <i :title="i18nt('designer.hint.remove')" @click.stop="removeWidget">
        <svg-icon icon-class="el-delete"/>
      </i>
    </div>

    <div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'grid-adv-col'">
      <i>网格子元素</i>
    </div>
  </div>
</template>

<script>
import i18n from "@/utils/i18n";
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import SvgIcon from '@/components/svg-icon'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
import {traverseWidgetsOfContainer} from "@/utils/util";

export default {
  name: "GridAdvColWidget",
  componentName: "GridAdvColWidget",
  mixins: [i18n, refMixinDesign],
  inject: ['refList'],
  components: {
    ...FieldComponents,
    SvgIcon,
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,

    colHeight: {
      type: String,
      default: null
    },

  },
  data() {
    return {}
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

    colHeightStyle() {
      return !!this.colHeight ? {height: this.colHeight + 'px'} : {}
    },
    gridAdvColStyle() {
      return this.widget.options.gridAdvColStyle
    }

  },
  watch: {

  },
  created() {
    this.initRefList()
    // this.initLayoutProps()
  },
  methods: {

    onGridDragEnd(evt, subList) {
      //
    },

    onGridDragAdd(evt, subList) {
      const newIndex = evt.newIndex
      if (!!subList[newIndex]) {
        this.designer.setSelected(subList[newIndex])
      }

      this.designer.emitHistoryChange()
      this.designer.emitEvent('field-selected', this.widget)
    },

    onGridDragUpdate() {
      this.designer.emitHistoryChange()
    },

    selectWidget(widget) {
      this.designer.setSelected(widget)
    },

    checkContainerMove(evt) {
      return this.designer.checkWidgetMove(evt)
    },

    selectParentWidget() {
      if (this.parentWidget) {
        this.designer.setSelected(this.parentWidget)
      } else {
        this.designer.clearSelected()
      }
    },

    moveUpWidget() {
      this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
    },

    moveDownWidget() {
      this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
    },

    cloneGridCol(widget) {
      this.designer.cloneGridCol(widget, this.parentWidget)
    },

    removeWidget() {
      if (!!this.parentList) {
        const widgetRefName = this.designer.selectedWidgetName
        const childrenRefNames = []
        const fwHandler = (fw) => {
          childrenRefNames.push(fw.options.name)
        }
        const cwHandler = (cw) => {
          childrenRefNames.push(cw.options.name)
        }
        traverseWidgetsOfContainer(this.designer.selectedWidget, fwHandler, cwHandler)

        let nextSelected = null
        if (this.parentList.length === 1) {
          if (!!this.parentWidget) {
            nextSelected = this.parentWidget
          }
        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
          nextSelected = this.parentList[this.indexOfParentList - 1]
        } else {
          nextSelected = this.parentList[this.indexOfParentList + 1]
        }

        this.$nextTick(() => {
          this.parentList.splice(this.indexOfParentList, 1)
          this.designer.emitEvent('canvas-remove-container', [])  //通知其他组件
          this.designer.setSelected(nextSelected)

          this.designer.formWidget.deleteWidgetRef(widgetRefName)  //删除组件ref！！！
          this.designer.formWidget.deletedChildrenRef(childrenRefNames)  //删除容器组件的所有内嵌组件ref！！！
          this.designer.emitHistoryChange()
        })
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.grid-cell {
  min-height: 38px !important;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  //padding: 3px;
  outline: 1px dashed #336699;
  position: relative;

  .form-widget-list {
    min-height: 28px;
    display: inline;
    flex: 1;
    width: 100%;

  }

  .drag-drop-zone {
    min-height: 100%;

    &:active {
      background: rgba(74, 255, 226, 0.44);
    }

    &:hover {
      background: rgba(74, 255, 226, 0.44);
    }
  }

  .grid-col-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: var(--ep-color-primary);
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .grid-col-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: var(--ep-color-primary);
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: default;
    }
  }
}

.grid-col-action, .grid-col-handler {
  :deep(.svg-icon) {
    margin-left: 0.1em;
    margin-right: 0.1em;
  }
}

</style>
